<template>
	<view class="aixin iconfont" :class="icon"></view>
	<view class="aixin2 iconfont" :class="icon"></view>
	<view class="aixin3 iconfont" :class="icon"></view>
	<view class="aixin4 iconfont" :class="icon"></view>
</template>

<script setup>
  const scolor= defineProps({
		color:{
			default:"red",
			type:String
		},
		icon:{
			type:String,
			default:"icon-xingxing1"
		}
	})
	const colorss=scolor.color
</script>			

<style lang="scss" scoped>
	.iconfont{
		color: v-bind(colorss);
	}
.aixin ,.aixin2,.aixin3,.aixin4{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 150rpx;
	transform-origin: bottom center;
	z-index: 9999999;

}
.aixin{
	z-index: 999;
		animation: move 1s linear forwards;
  }
.aixin2,.aixin3,.aixin4{
   font-size: 60rpx;
	 
}
.aixin2{
	  animation: go 1s forwards linear;
}
.aixin3{
	 animation: go3 1s 0.5s forwards linear;
}
.aixin4{
	 animation: go2 1s 0.2s forwards linear;
}
@keyframes go{
	 0%{
		  top: 50%;
		  left: 52%;
		  opacity: 0;
	 }
	 33%{	 
		 top: 45%;
		 left: 48%;
		 opacity: 1;
	 }
	 66%{
		 top: 40%;
		 left: 52%;
		 opacity: 1;
	 }
	 100%{
	 		 top: 35%;
	 		 left: 43%;
	 		 opacity: 0;
	 }
}
@keyframes go2{
	 0%{
		  top: 50%;
		  left: 50%;
		  opacity: 1;
	 }
	 100%{
	 		 top: 35%;
	 		 left: 65%;
	 		 opacity: 0;
	 }
}
@keyframes go3{
	 0%{
		  top: 50%;
		  left: 55%;
		  opacity: 0;
	 }
	 50%{	 
		 top: 40%;
		 left: 45%;
		 opacity: 1;
	 }
	 100%{
		 top: 35%;
		 left: 58%;
		 opacity: 0;
	 }
}
@keyframes move{
	   0%{
		   transform:translate(-50%,-50%)  rotate(-15deg) scale(1);
	   }
	   33%{
		  transform:translate(-50%,-50%) rotate(15deg);
	   }
	   66%{
	   		   transform:translate(-50%,-50%) rotate(-15deg);
	   }
	   100%{
	   		  transform:translate(-50%,-50%) rotate(15deg) scale(0);
	   }
}
</style>